<template>
  <!-- 顶部 -->
  <span class="fixed w-full z-50" :class="data.showNavBar ? 'block' : 'hidden'">
    <van-nav-bar
      title="朋友圈"
      left-arrow
      class="!bg-slate-50"
      @click-left="onClickLeft"
      :style="{
        backgroundColor: `rgba(230, 230, 230,${data.bgOpacity}) !important`
      }"
    >
      <template #right>
        <van-icon name="photograph" size="18" />
      </template>
    </van-nav-bar>
  </span>

  <div class="relative h-80 w-ful">
    <!-- 背景图 -->
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff266c0fa-fe4c-4b86-875e-c41f6f9e45da%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706273761&t=c9adc481914674a0082f5af0df90abfe"
      alt=""
      class="absolute w-full h-full object-cover"
    />
    <!-- 昵称，头像 -->
    <div class="absolute -bottom-4 right-4 flex">
      <text class="mr-2 font-black text-white">遇见</text>
      <img src="http://mms2.baidu.com/it/u=2777299881,1453035647&fm=253&app=138&f=JPEG?w=180&h=180"  alt="" style="width: 60px; height: auto;border-radius: 8px;"/>
    </div>
  </div>

  <div class="p-10">
    <MomentsItem v-for="item in commentItemList" :item="item"/>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import MomentsItem from '@/components/MomentsItem.vue'

const router = useRouter()

const data = reactive({
  showNavBar: false,
  bgOpacity: 0,
  scrollTop: 0
})

const commentItemList = ref([])

const onClickLeft = () => router.back()

const getScrollTop = () => {
  data.scrollTop = window.pageYOffset
  if (data.scrollTop > 50) {
    data.showNavBar = true

    // 根据被卷去的高度调整背景透明度
    data.bgOpacity = (data.scrollTop - 100) / 10
  } else {
    data.showNavBar = false
  }
}

const loadMontents = () => [
  {
    user: { name: '刘文静', avatar: 'http://img.touxiangwu.com/zb_users/upload/2022/11/202211031667466451181396.jpg' },
    title: '元旦快乐',
    images: [
      'https://img1s.tuliu.com//art/2023/12/27/658b801ed915b.jpg',
    
    ],
    imgnum : 1,
    timestr: '20分钟前',
    showReplyPanel: false,
    share: {},
    thumbsup: ['年年', '小路','李陆逊','黄梁','柳哉','HIUJ','酷炫'],
    replies: [
      { user: '年年', text: '新年快乐!!!' },
      { user: '柳哉', text: '元旦快乐' }
    ]
  },
  {
    user: { name: '鸡蛋仔', avatar: 'https://img1.baidu.com/it/u=636081737,1596605338&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
    title: '干饭啦😋',
    images: [
      'https://img1.baidu.com/it/u=3055351007,1003674145&fm=253&fmt=auto&app=138&f=JPEG?w=755&h=500',
    ],
    imgnum : 1,
    timestr: '1小时前',
    showReplyPanel: false,
    share: {},
    thumbsup: ['黄梁','柳哉','HIUJ', '小路','李陆逊'],
    replies: [
      { user: 'HIUJ', text: '大餐啊' }
    ]
  },
  {
    user: { name: '陈霜', avatar: 'https://img2.baidu.com/it/u=2333125752,329889149&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400' },
    title: 'φ(゜▽゜*)♪',
    images: [
      'https://img0.baidu.com/it/u=1397203767,4231030802&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=665'
    ],
    imgnum : 1,
    timestr: '2小时前',
    showReplyPanel: false,
    share: {},
    thumbsup: ['料件','柳哉','HIUJ', '小路'],
    replies: [
    { user: '小路', text: '美女啊😍' }
    ]
  },
  {
    user: { name: 'HIUJ', avatar: 'https://img0.baidu.com/it/u=1803426863,711132593&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
    title: '欣赏一下我的作品',
    images: [
      'https://img1.baidu.com/it/u=2966511059,2225055449&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
      'https://img0.baidu.com/it/u=2841932744,1668712314&fm=253&fmt=auto&app=138&f=JPEG?w=625&h=500',
      'https://img2.baidu.com/it/u=1092121497,1310995114&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
      'https://img0.baidu.com/it/u=1615304055,680179588&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=400',
    ],
    imgnum : 4,
    timestr: '4小时前',
    showReplyPanel: false,
    share: {},
    thumbsup: ['黄梁','柳哉','HIUJ', '小路','李陆逊'],
    replies: []
  },
  {
    user: { name: '空零', avatar: 'https://img1.baidu.com/it/u=365780974,2957030930&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380' },
    title: '冲冲冲冲冲',
    images: [],
    imgnum : 0,
    timestr: '5小时前',
    showReplyPanel: false,
    share: {
      img: 'http://coding.imweb.io/img/p3/transition-hover.jpg',
      text: '飘洋过海来看你'
    },
    thumbsup: [],
    replies: []
  },
  {
    user: { name: '李陆逊', avatar: 'https://img1.baidu.com/it/u=868352044,2637625991&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' },
    title: '人嘛了😣',
    images: [],
    imgnum : 0,
    timestr: '4小时前',
    showReplyPanel: false,
    share: {},
    thumbsup: [],
    replies: []
  }
]

onMounted(() => {
  window.addEventListener('scroll', getScrollTop)
  commentItemList.value = loadMontents()
  console.log(commentItemList.value)
})

onBeforeUnmount(() => window.removeEventListener('scroll', getScrollTop))
</script>
